<template>
    <el-switch v-model='row[column.property]' :disabled='disabled' :width='width'
               :active-icon-class='activeIconClass' :inactive-icon-class='inactiveIconClass'
               :active-text='activeText' :inactive-text='inactiveText'
               :active-value='activeValue' :inactive-value='inactiveValue'
               :active-color='activeColor' :inactive-color='inactiveColor'
               :name='name' :validate-event='validateEvent'
               @change='handleChange'
    ></el-switch>
</template>

<script>
export default {
    name: 'CustomSwitch',
    props: {
        params: Object,
        width: {
            type: Number,
            default: 40,
        },
        activeIconClass: String,
        inactiveIconClass: String,
        activeText: String,
        inactiveText: String,
        activeValue: [Boolean, String, Number],
        inactiveValue: [Boolean, String, Number],
        activeColor: String,
        inactiveColor: String,
        name: String,
        validateEvent: {
            type: Boolean,
            default: true,
        },
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            loading: false,
            optionsList: [],
            row: {},
            column: {},
        }
    },
    created() {
        this.init();
    },
    methods: {
        async init() {
            const { row, column } = this.params
            this.row = row
            this.column = column
        },
        handleChange() {
            const { row, column } = this;
            this.$emit('change', row[column.property]);
        },
    },
}
</script>

<style scoped>

</style>
